<template>
  <div class="dashboard-editor-container">

    <panel-group :total='total' @handleSetLineChartData="handleSetLineChartData" />
    <el-row style="padding:16px 0;margin-bottom:32px;">
        <el-date-picker
          v-model="time"
          type="daterange"
          value-format="timestamp"
          @change="getIndex"
          :unlink-panels='true'
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份">
        </el-date-picker>
    </el-row>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>
    <el-card>
      <el-row>
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="日" name="DAY"></el-tab-pane>
            <el-tab-pane label="周" name="WEEK"></el-tab-pane>
            <el-tab-pane label="月" name="MONTH"></el-tab-pane>
            <el-tab-pane label="年" name="YEAR"></el-tab-pane>
          </el-tabs>
      </el-row>
      <el-row>
        <el-table
          :data="tableData"
          height="250"
          border
          style="width: 100%">
          <el-table-column
            prop="storeName"
            label="驻点名称">
          </el-table-column>
          <el-table-column
            prop="quantity"
            label="订单"
            width="180">
             <template slot-scope="scope">
                <div class="quantity" @click="goOrder(scope.row.storeId)">{{scope.row.quantity}}</div>
             </template>
          </el-table-column>
          <el-table-column
            prop="money"
            label="金额"
             width="180">
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
    <!-- <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import {stat, statStore} from '@/api/login'
// import moment from 'moment'
// const lineChartData = {
//   newVisitis: {
//     expectedData: [100, 120, 161, 134, 105, 160, 165, 150, 145, 134, 233],
//     actualData: [120, 82, 91, 154, 162, 140, 145, 123, 125, 166, 159]
//   },
//   messages: {
//     expectedData: [200, 192, 120, 144, 160, 130, 140],
//     actualData: [180, 160, 151, 106, 145, 150, 130]
//   },
//   purchases: {
//     expectedData: [80, 100, 121, 104, 105, 90, 100],
//     actualData: [120, 90, 100, 138, 142, 130, 130]
//   },
//   shoppings: {
//     expectedData: [130, 140, 141, 142, 145, 150, 160],
//     actualData: [120, 82, 91, 154, 162, 140, 130]
//   }
// }

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      lineChartData: { 
        orderData:[],
        totalData:[],
        dateData:[]
      },
      tableData:[],
      activeName:'DAY',
      time:[],
      total:{

      }
    }
  },
  created(){
    const endTime = new Date().getTime() 
    const startTime =  new Date().getTime() - 8 * 24 * 60 * 60 * 1000
    this.time = [startTime, endTime]
    // console.log(new Date(endTime).getFullYear(),new Date(endTime).getMonth(),new Date(endTime).getDate())
    // console.log(new Date(endTime).getHours(),new Date(endTime).getMinutes(),new Date(endTime).getSeconds())
    this.getIndex()
  },
  watch:{
    activeName:{
       handler(){
          this.getStoreIndex()
       },
       immediate:true
    }
  },
  methods: {
    handleSetLineChartData(type) {
      // this.lineChartData = lineChartData[type]
    },
    getStoreIndex(){
      this.tableData = []
       statStore({biType:this.activeName}).then((res) => {
         this.tableData = Object.values(res.data)
       })
    },
    goOrder(id){
      this.$router.push({path:'service/order?storeId='+id})
    },
    getIndex(){
      let params = {
        start: this.time[0],
        end: this.time[1]
      }
      stat(params).then((res) => {
        this.total = {
          orderCount: res.data.orderCount,
          totalAmount: res.data.totalAmount
        }
        let lineChartData = {
          orderData:[],
          totalData:[],
          dateData:[]
        }
        res.data.statistics.forEach((item) => {
          lineChartData.orderData.push(item.count)
          lineChartData.totalData.push(item.amount)
          lineChartData.dateData.push(item.date)
        })
        this.lineChartData = lineChartData
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
 .quantity{
   color: #1890ff;
   cursor: pointer;
   text-decoration: underline;
 }
@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
